<template>
	<el-container style="padding: 20px">
		<el-header>
			<div style="display: flex">
				<el-upload action="https://jsonplaceholder.typicode.com/posts/" class="upload-demo" :show-file-list="false" :limit="1" :http-request="toUploadFile" :file-list="fileList">
					<el-button size="mini" type="primary" @click="uploadType = '1'"><i class="el-icon-upload"></i> word版</el-button>
				</el-upload>
				<el-upload
					action="https://jsonplaceholder.typicode.com/posts/"
					class="upload-demo"
					:show-file-list="false"
					:limit="1"
					:http-request="toUploadFile"
					:file-list="fileList"
					style="margin-left: 16px"
				>
					<el-button size="mini" type="primary" @click="uploadType = '2'"><i class="el-icon-upload"></i> 盖章版</el-button>
				</el-upload>
				<el-upload
					action="https://jsonplaceholder.typicode.com/posts/"
					class="upload-demo"
					:show-file-list="false"
					:limit="1"
					:http-request="toUploadFile"
					:file-list="fileList"
					style="margin-left: 16px"
				>
					<el-button size="mini" type="primary" @click="uploadType = '3'"><i class="el-icon-upload"></i> PDF版</el-button>
				</el-upload>
			</div>
		</el-header>
		<el-main>
			<el-table :data="successTableData" border style="width: 100%; margin-bottom: 20px" :header-cell-style="{ background: '#FAFAFA' }" v-if="successTableData.length">
				<el-table-column prop="fileName" label="上传成功文件"> </el-table-column>
			</el-table>

			<el-table :data="errorTableData" border style="width: 100%" :header-cell-style="{ background: '#FAFAFA' }" v-if="errorTableData.length">
				<el-table-column prop="fileName" label="不被允许上传文件"> </el-table-column>
				<el-table-column prop="description" label="不被允许原因"> </el-table-column>
			</el-table>
		</el-main>

		<updateInfo :addComShow="addComShowUpdate" @comIsShow="comIsShowUpdate" @getUpdateData="getUpdateData" :uploadType="uploadType" ref="managerInfo" />

		<errorList ref="errorList" :errorCom="errorCom" @errorFunc="errorFunc" />
	</el-container>
</template>
<script>
import updateInfo from './components/updateInfo'
import errorList from './components/errorList'
import { yaerUpdate } from '@/api/productApi/annReport'
import { Loading } from 'element-ui'
export default {
	name: 'AnnualReport',
	components: {
		updateInfo,
		errorList
	},
	data() {
		return {
			addComShowUpdate: false,
			errorCom: false,
			successTableData: [],
			errorTableData: [],
			fileList: [],
			loadingOptions: {
				text: '文件较大，正在解析中，请耐心等待',
				background: 'rgba(0, 0, 0, 0.8)',
				spinner: 'el-icon-loading'
			},
			uploadType: ''
		}
	},
	mounted() {
		// this.getRecordChangeList()
	},
	methods: {
		toUploadFile(params) {
			const form = new FormData()
			const maxFile = params.file.size / 1024 / 1024 > 300
			form.append('file', params.file)
			if (params.file.name.split('.')[params.file.name.split('.').length - 1] === 'zip') {
				if (maxFile) {
					this.$message({ type: 'warning', message: '无法解析超过300M的文件' })
					this.fileList = []
					return false
				}
				Loading.service(this.loadingOptions)
				yaerUpdate(form)
					.then(res => {
						if (res.code === 0) {
							this.$message({ type: 'success', message: '操作成功' })
							this.updateData(res.data.body)
						} else {
							this.$message({ type: 'warning', message: res.msg })
						}
						const loadingInstance = Loading.service(this.loadingOptions)
						this.$nextTick(() => {
							loadingInstance.close()
						})
						this.fileList = []
					})
					.catch(() => {
						this.$message({ type: 'error', message: '网速过慢或文件太大，请重新选择' })
					})
			} else {
				this.fileList = []
				this.$message({ type: 'warning', message: '暂不支持此格式文件,仅支持zip格式' })
			}
		},

		// 上传核对数据
		updateData(data) {
			this.$refs.managerInfo.edit(data)
			this.comIsShowUpdate()
		},
		comIsShowUpdate() {
			this.addComShowUpdate = !this.addComShowUpdate
		},

		getUpdateData(data) {
			console.log(data)
			this.successTableData = data.successList ? data.successList : []
			this.errorTableData = data.notAllowList ? data.notAllowList : []
			this.uploadType = ''
			if (data.errorList) {
				this.$refs.errorList.edit(data.errorList)
				this.errorFunc()
			}
		},

		errorFunc() {
			this.errorCom = !this.errorCom
		}
	}
}
</script>
<style lang="scss" scoped src='./index.scss'>
</style>
